{template 'header'}
<style type="text/css">
      .notify-page {
          background-color: #efeff4
      }
      
      .notify-page .banner {
          font-size: 0
      }
      
      .notify-page .banner img {
          width: 100%
      }
      
      .notify-page .first-notify,.notify-page .second-notify {
          height: 101px;
          background-color: #fff
      }
      
      .notify-page .first-notify .notify-wrap,.notify-page .first-notify .time-select,.notify-page .second-notify .notify-wrap,.notify-page .second-notify .time-select {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #ececec;
          padding: 0 20px
      }
      
      .notify-page .first-notify .notify-wrap .notify-txt,.notify-page .first-notify .notify-wrap .time-txt,.notify-page .first-notify .time-select .notify-txt,.notify-page .first-notify .time-select .time-txt,.notify-page .second-notify .notify-wrap .notify-txt,.notify-page .second-notify .notify-wrap .time-txt,.notify-page .second-notify .time-select .notify-txt,.notify-page .second-notify .time-select .time-txt {
          height: 100%;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl,.notify-page .first-notify .notify-wrap .time,.notify-page .first-notify .time-select .notify-ctrl,.notify-page .first-notify .time-select .time,.notify-page .second-notify .notify-wrap .notify-ctrl,.notify-page .second-notify .notify-wrap .time,.notify-page .second-notify .time-select .notify-ctrl,.notify-page .second-notify .time-select .time {
          width: 100px;
          height: 100%
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl input,.notify-page .first-notify .notify-wrap .time input,.notify-page .first-notify .time-select .notify-ctrl input,.notify-page .first-notify .time-select .time input,.notify-page .second-notify .notify-wrap .notify-ctrl input,.notify-page .second-notify .notify-wrap .time input,.notify-page .second-notify .time-select .notify-ctrl input,.notify-page .second-notify .time-select .time input {
          display: block;
          height: 50px;
          width: 100%;
          border: none;
          appearance: none;
          -webkit-appearance: none;
          line-height: 50px;
          margin-left: 16px;
          background: none;
          font-size: 14px;
          text-align: right
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl,.notify-page .first-notify .time-select .notify-ctrl,.notify-page .second-notify .notify-wrap .notify-ctrl,.notify-page .second-notify .time-select .notify-ctrl {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          justify-content: flex-end
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl .ctrl-wrap,.notify-page .first-notify .time-select .notify-ctrl .ctrl-wrap,.notify-page .second-notify .notify-wrap .notify-ctrl .ctrl-wrap,.notify-page .second-notify .time-select .notify-ctrl .ctrl-wrap {
          height: 26px;
          width: 48px;
          background: -webkit-linear-gradient(left,#fe956f,#fe5064);
          border-radius: 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl .ctrl-wrap .ctrl,.notify-page .first-notify .time-select .notify-ctrl .ctrl-wrap .ctrl,.notify-page .second-notify .notify-wrap .notify-ctrl .ctrl-wrap .ctrl,.notify-page .second-notify .time-select .notify-ctrl .ctrl-wrap .ctrl {
          height: 22px;
          width: 22px;
          margin-left: 24px;
          border-radius: 50%;
          background-color: #fff;
          -webkit-transition: margin-left .2s;
          transition: margin-left .2s
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl .ctrl-wrap .ctrl-active,.notify-page .first-notify .time-select .notify-ctrl .ctrl-wrap .ctrl-active,.notify-page .second-notify .notify-wrap .notify-ctrl .ctrl-wrap .ctrl-active,.notify-page .second-notify .time-select .notify-ctrl .ctrl-wrap .ctrl-active {
          margin-left: 2px
      }
      
      .notify-page .first-notify .notify-wrap .notify-ctrl .ctrl-wrap-active,.notify-page .first-notify .time-select .notify-ctrl .ctrl-wrap-active,.notify-page .second-notify .notify-wrap .notify-ctrl .ctrl-wrap-active,.notify-page .second-notify .time-select .notify-ctrl .ctrl-wrap-active {
          background: #ddd
      }
      
      .notify-page .first-notify .time-select,.notify-page .second-notify .time-select {
          border: none
      }
      
      .notify-page .second-notify {
          margin-top: 10px
      } 
      
      .close-it{
      	background: #ccc !important;
      }
      .close-it .ctrl{
      	margin-left:0px !important;
      }
    </style>
   
    <div class="notify-page">
        <div class="banner g-rlt">
            {if !empty($cfg['adv']['remind'])}
            <a href="{$cfg['adv']['remind_url']}"><img src="{php echo toimage($cfg['adv']['remind'])}" alt=""></a>
            {/if}
            <p class="g-center-abs g-color-white" style="font-size: 30px; height: 30px; line-height: 30px; text-align: center; letter-spacing: 3px; top: 50%; margin-top: -15px;">{$cfg["adv"]["remind_txt"]}</p>
        </div>
        <div class="first-notify">
            <div class="notify-wrap">
                <div class="notify-txt">开启第一次学习提醒</div>
                <div class="notify-ctrl">
                    <div onclick="openBtn(this,1)" class="ctrl-wrap">
                        <input type="hidden" id="switch0" name="switch" value="">
                        <div class="ctrl"></div>
                    </div>
                </div>
            </div>
            <div class="time-select">
                <div class="time-txt">提醒时间</div>
                <div class="time first-time">
                    <input type="time" id="rtime0" value="">
                </div>
            </div>
        </div>
        <div class="second-notify">
            <div class="notify-wrap">
                <div class="notify-txt">开启第二次学习提醒</div>
                <div class="notify-ctrl">
                    <div onclick="openBtn(this,2)" class="ctrl-wrap">
                    	<input type="hidden" id="switch1" name="switch" value="">
                        <div class="ctrl"></div>
                    </div>
                </div>
            </div>
            <div class="time-select">
                <div class="time-txt">提醒时间</div>
                <div class="time first-time">
                    <input type="time" id="rtime1" value="">
                </div>
            </div>
        </div>
    </div>
{template 'loading'}
<script>
var mem_book_id = getCookie('mem_book');
function openBtn(obj, type){
	if($(obj).hasClass('close-it')) {
		$(obj).find('input').val(1);
		$(obj).removeClass('close-it');
		goChange(type, 1)
	}
	else{
		$(obj).find('input').val(0);
		$(obj).addClass('close-it');
		goChange(type, 0)
	}
}
function goChange(type, val, time){
	var id_type = parseInt(type) - 1;
	if(!time || time=='') time = $('#rtime'+id_type).val();
	if(!val || val=='') val = $('#switch'+id_type).val();
	$.ajax({
		 type:'POST',
		 data:{id: mem_book_id,type: type,val: val, rtime: time},
		 url:'{php echo $this->murl("remind",["op"=>"change"])}',
		 success:function(dat){
			 
		 }
	});
}
$(function(){
	$('#rtime1').change(function(res){
		var time = $(this).val();
		goChange(2, '', time)
	});
	$('#rtime0').change(function(res){
		var time = $(this).val();
		goChange(1, '', time)
	});
	$.ajax({
		 type:'POST',
		 data:{id: mem_book_id},
		 url:'{php echo $this->murl("remind")}',
		 success:function(dat){
			 dat = JSON.parse(dat);
			 if(dat.code==1){
				 var dat = dat.data.remind;
				 console.log(dat);
				 if(dat.length>0){
					 for(var i in dat){
						 if(dat[i].status == '0'){
							 $('#switch'+i).val(0);
							 $('#switch'+i).parent('div').addClass('close-it');
						 }
						 else{
							 $('#switch'+i).val(1);
							 $('#switch'+i).parent('div').removeClass('close-it');
						 }
						 if(dat[i].time=='' || !dat[i].time){
							 if(i==0) $('#rtime'+i).val('07:00');
							 else $('#rtime'+i).val('19:00');
						 }
						 else{
							 $('#rtime'+i).val(dat[i].time);
						 }
					 } 
				 }
				 else{
					 $('#rtime0').val('07:00');
					 $('#rtime1').val('19:00');
				 }
			 }
			 else{
				 $('.first-notify').hide();
				 $('.second-notify').hide();
			 }
		 }
	});
})
</script>
   </body></html>